@casual-simulation/aux-vm-browser

AUX VM Browser

A set of utilities required to run an AUX in a web browser.

Installation

1. Install the NPM package

npm install @casual-simulation/aux-vm-browser

1. Add the WorkerEntry.js file to your Webpack config:

entry: {
    vm: path.resolve(
        __dirname,
        'node_modules',
        '@casual-simulation',
        'aux-vm-browser',
        'html',
        'WorkerEntry.js'
    ),
},

1. Add the iframe_host.html file to your webpack config via the HtmlWebpackPlugin:

new HtmlWebpackPlugin({
    chunks: ['vm'],
    template: path.resolve(
        __dirname,
        'node_modules',
        '@casual-simulation',
        'aux-vm-browser',
        'html',
        'iframe_host.html'
    ),
    title: 'AUX VM',
    filename: 'aux-vm-iframe.html',
}),

1. Ensure that aux-vm-iframe.html is available at the root path of the site.

Usage

Connect to an AUX

import { BotManager } from '@casual-simulation/aux-vm-browser';
import { AuxUser } from '@casual-simulation/aux-vm';

start();

async function start() {
    // The user that we want the program to act as.
    // In a real-world scenario we would not hardcode these values
    // and we would store the token in a secure location.
    const user: AuxUser = {
        id: 'myUserId', // The Unique ID of this user session.
        username: 'myUsername', // The unique username of the user.
        name: 'myName', // The common name of the user.
        token: 'mySecretToken', // The user password.
        isGuest: false, // Whether the user should be treated as a guest.
    };

    // The ID of the channel that should be loaded.
    // The ID can have the following forms:
    // - 'channelId' - This will load 'channelId' from the current host (taken from navigator).
    // - 'https://example.com/*/channelId' - This will load 'channelId' from example.com over https
    const id = 'channelId';

    // Create a file manager.
    // This represents an in-browser AUX simulation.
    const sim = new BotManager(user, id, {
        isBuilder: false,
        isPlayer: false,
    });

    // Initialize the simulation.
    // This will setup a web worker and pipe
    // events between the worker and main thread.
    await sim.init();

    // Listen for the sync state to change to "synced".
    // When we're synced we know we have the most up to date data
    // and we can communicate our changes to the server.
    // Note that this will not fire if we are not allowed to connect.
    // This may happen if we are not authenticated/authorized.
    sim.connection.syncStateChanged.subscribe((synced) => {
        if (synced) {
            console.log("We're synced!");

            // TODO: Update THE UI
        } else {
            console.log('No longer synced.');

            // TODO: Update the UI
        }
    });
}

Changelog

V2.0.36

Date: 2/4/2022

:rocket: Improvements

• Added global search to the systemPortal.
  • Useful for finding a word or phrase in the tags of all the bots in an inst.
  • For example, you can find all the places where a shout occurrs by typing "shout" into the search box.
  • Can be accessed by using Ctrl+Shift+F while the systemPortal is open or by selecting the eyeglass icon on the left side of the screen.
• Added the ability to use a video camera feed as the portal background.
  • You can enable this feature by setting portalBackgroundAddress to casualos://camera-feed.
  • It also supports specifying the rear or front facing cameras with casualos://camera-feed/rear and casualos://camera-feed/front.

:bug: Bug Fixes

• Fixed an issue with custom apps where HTML changes would stop propagating if an element was added to its own parent.
  • This could happen via using the HTML document API like:

    // in @onSetupApp
    const parent = that.document.createElement('div');
    const child = that.document.createElement('span');
    parent.appendChild(child);
    parent.appendChild(child); // This would cause the issue
    

  • Alternatively, it could happen when using os.compileApp().
    • For efficiency, os.compileApp() uses a change detection algorithm to limit the number of HTML elements it needs to create.
    • In some cases, it saw that it could reuse an HTML element by moving it and this happened to trigger the bug in the system that records these changes.